<template>
  <div class="login_cotainer">
    <div class="login_box">


      <!-- 头像区域 -->
      <div class="avatar_box">
        <img src="../assets/login_admin.jpg" alt="" />
      </div>



      <!-- 登陆表单区域 -->
      <el-form class="login_from" :model="loginFrom" :rules="loginRules" ref="loginFromRef">

        <!-- 用户名 -->
        <el-form-item prop="username">
          <el-input v-model="loginFrom.username" placeholder="默认为admin" prefix-icon="iconfont icon-user"></el-input>
        </el-form-item>

        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input v-model="loginFrom.password" placeholder="默认为123456" prefix-icon="iconfont icon-3702mima" show-password></el-input>
        </el-form-item>

        <!-- 按钮 -->
        <el-form-item class="btns">
          <el-button type="primary" @click="btnLogin">登陆</el-button>
          <el-button type="info" @click="btnRemake">重置</el-button>
        </el-form-item>

      </el-form>


    </div>
  </div>
</template>


<script>
export default {
  data(){
    return{
      request:0,
      loginFrom:{ //登陆数据
        username:'admin',
        password:'123456',
      },
      loginRules:{ //登陆数据的验证规则
        username:[
          {required:true,message:'请输入用户名',trigger:'blur'},
          {min:3,max:6,message:'长度在3-6个字符',trigger:'blur'}
        ],
        password:[
          {required:true,message:'请输入密码',trigger:'blur'},
          {min:3,max:6,message:'长度在3-6个字符',trigger:'blur'}
        ],
      },
      res:{}
    }
  },
  mounted(){
  },
  methods:{
    async btnLogin(){ //登陆按钮
      if(this.request != 0){return}; //做个简单的节流
      this.request++; //节流

      // 表单数据验证是否成功element自带的方法
      this.$refs.loginFromRef.validate(async (boolean)=>{
        if(!boolean){return};
         //成功发起请求
        const {data} = await this.$axios.post("login",this.loginFrom);
        // 判断请求返回是否登陆成功
        if(data.meta.status != 200){
          this.$message.error('登陆失败!');
          return;
        }else{
          this.$message.success('登陆成功!');
          // 先把token存了 兄弟们
          window.sessionStorage.setItem("token",data.data.token);
          // 转跳到主页
          this.$router.push('/home');
        }
      });



      setTimeout(() => { //节流
        this.request--;
      }, 800);
    },
    btnRemake(){ //重置按钮
      this.$refs.loginFromRef.resetFields() //elementui自带的重置函数自动重置上面绑定的loginFrom
    }
  }
};
</script>


<style lang="less">
.login_cotainer {
  height: 100%;
  background-color: #ccc;
  .login_box {
    width: 450px;
    height: 300px;
    background-color: white;
    border-radius: 3px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .avatar_box {
      width: 120px;
      height: 120px;
      border: 5px solid rgb(163, 163, 163);
      border-radius: 50%;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      box-shadow: 0 0 20px white;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .btns {
      display: flex;
      justify-content: center;
    }
    .login_from{
      width: 100%;
      padding: 0 20px;
      box-sizing: border-box;
      position: absolute;
      bottom: 0;
    }
  }
}
</style>